<template>
  <div class="add-box">
    <el-button type="primary">添加</el-button>
  </div>
  <el-table :data="tableData" border>
    <el-table-column label="编号" prop="id"></el-table-column>
    <el-table-column label="类型名称" prop="name"></el-table-column>
    <el-table-column label="属性数量" prop="attributeCount"></el-table-column>
    <el-table-column label="参数数量" prop="paramCount"></el-table-column>
    <el-table-column label="设置">
      <template #default="scope">
        <div>
          <el-button>属性列表</el-button>
          <el-button>参数列表</el-button>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <div style="display: flex">
          <el-button @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </div>
      </template>
    </el-table-column>
  </el-table>
  <ElConfigProvider :locale="zhCn">
    <el-pagination
      background
      v-model:currentPage="listParams.pageNum"
      @size-change="pageSizeChagne"
      @current-change="currentChange"
      v-model:page-size="listParams.pageSize"
      layout="total,prev,sizes,prev, pager,next,jumper"
      :total="total"
      :page-sizes="[5, 10, 15]"
    />
  </ElConfigProvider>
</template>
<script setup lang="ts">
import { reactive, toRefs } from "vue";
import { ElConfigProvider, ElMessage } from "element-plus";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { user } from "@/api";
interface IState {
  tableData: IGoodAttribute[];
  listParams: user;
  total: number;
  totalPage: number;
}
const state = reactive<IState>({
  tableData: [],
  listParams: {
    pageNum: 1,
    pageSize: 5,
  },
  total: 0,
  totalPage: 0,
});

const { tableData, listParams, total, totalPage } = toRefs(state);

const getList = () => {
  user.getGoodsAttributeListApi(listParams.value).then((res) => {
    tableData.value = res.data.list;
    total.value = res.data.total;
    totalPage.value = res.data.totalPage;
  });
};
getList();
const pageSizeChagne = () => {
  getList();
};
const currentChange = (value: number) => {
  if (state.totalPage == value) {
    ElMessage.warning("没有更多的信息");
  }
  getList();
};
const handleEdit = (row: IGoodAttribute) => {};
const handleDelete = (row: IGoodAttribute) => {};
</script>
<style lang="less" scoped>
/deep/.cell {
  text-align: center;
}

/deep/.el-table_1_column_1 {
  text-align: center;
}
.add-box {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  margin: 20px 0;
  border-radius: 10px;
  box-shadow: 0 0 4px 2px #ccc;
}
</style>
